<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入本地的layui.css样式文件  -->
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<form class="layui-form" action="" style="margin: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-inline">
            <input type="text" name="account" lay-verify="required|account" autocomplete="off" placeholder="请填写账户" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" lay-verify="required|password" size="20px" autocomplete="off" placeholder="请填写登录密码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" class="layui-input" size="20px" placeholder="请填写姓名">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
            <label>
                <select name="dept">
                    <option value="">请选择</option>
                    <option value="超级管理员" >超级管理员</option>
                    <option value="管理员">管理员</option>
                    <option value="普通账户">普通账户</option>
                </select>
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" autocomplete="off" placeholder="请填写手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="age" id="entry_date" placeholder="出生日期">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn_submit">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
        </div>
    </div>
</form>



<!--  引入本地的layui.js文件  -->
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'layer','laydate'], function(){
        var $ = layui.$,
            form = layui.form,
            layedit = layui.layedit,
            laydate = layui.laydate,
            layer = layui.layer;

        //常规用法
        laydate.render({
            elem: '#entry_date'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            account: function(value){
                if(value.length < 3){
                    return '账户至少得5个字符啊';
                }
            }
            ,password: [
                /^[a-zA-Z]\w{5,17}$/
                ,'以字母开头，长度在6~18之间，只能包含字母、数字和下划线'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(btn_submit)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })

            return false;
        });


    });
</script>

</body>
</html>